<!DOCTYPE html>
<html lang="en">

<head>
    <title>鼠标拖拽改变input的值</title>
    <input type="text" id="input">
</head>

<body>
    <script>
        let x = 0
        document.addEventListener("mousedown", (e) => {
            // 解释为什么要用startX接收e.x的值，因为e.x是鼠标点击的坐标，而mousemove事件的坐标是实时的，所以要记录点击的坐标
            let startX = e.x
            console.log(startX);

            /* startX = 29 */
            const mousemove = (me) => {
                /*
                    me.x:是当前鼠标移动的实时坐标
                    startX：me.x移动前的坐标
                */
                let offsetX = me.x - startX
                console.log(offsetX);

                x += offsetX
                console.log("记录起始值");
                startX = me.x
                input.value = x
            }
            const mouseup = (me) => {
                document.removeEventListener("mousemove", mousemove)
                document.removeEventListener("mouseup", mouseup)
            }
            document.addEventListener("mousemove", mousemove)
            document.addEventListener("mouseup", mouseup)
        })

    </script>
</body>

</html>